<!--
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!doctype html>
<html>
<head>
  <script src="../../../webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="../../polymer.html">
  <script src="../../../tools/test/htmltest.js"></script>
  <script src="../../../tools/test/chai/chai.js"></script>

  <style shim-shadowdom>
    [layout] {
      border: 1px solid orange;
    }

    [flex] {
      background-color: orange;
    }

    [sized] {
      background-color: green;
      border: 1px solid black;
      height: 200px;
      width: 200px;
    }

    [sized-container] [layout] {
      height: 500px;
      width: 500px;
    }

    /* IE10: requires flex items to be display block */
    span {
      display: block;
    }

  </style>

</head>
<body unresolved>
  <div id="test1">
    <h2>layout flex</h2>
    <span horizontal layout>
      <span>I am not flex</span>
      <span flex>
        intrinsix
      </span>
      <span flex sized></span>
      <span>I am not flex</span>
    </span>
    <br><br>
    <span vertical layout>
      <span>I am not flex</span>
      <span flex>
        intrinsix
      </span>
      <span flex sized></span>
      <span>I am not flex</span>
    </span>
  </div>
  <br><hr><br>
  <div id="test2">
    <h2>layout flex auto</h2>
    <span horizontal layout>
      <span>I am not flex</span>
      <span flex auto>
        intrinsix
      </span>
      <span flex auto sized></span>
      <span>I am not flex</span>
    </span>
    <br><br>
    <span vertical layout>
      <span>I am not flex</span>
      <span flex auto>
        intrinsix
      </span>
      <span flex auto sized></span>
      <span>I am not flex</span>
    </span>
  </div>
<br><hr><br>
<div id="test3">
  <h2>layout flex auto-vertical</h2>
  <span horizontal layout>
    <span>I am not flex</span>
    <span flex auto-vertical>
      intrinsix
    </span>
    <span flex auto-vertical sized></span>
    <span>I am not flex</span>
  </span>
  <br><br>
  <span vertical layout>
    <span>I am not flex</span>
    <span flex auto-vertical>
      intrinsix
    </span>
    <span flex auto-vertical sized></span>
    <span>I am not flex</span>
  </span>
</div>
<br><hr><hr><br>
<h1>Sized Container</h1>
<div sized-container>
  <div id="test4">
    <h2>layout flex</h2>
    <span horizontal layout>
      <span>I am not flex</span>
      <span flex>
        intrinsix
      </span>
      <span flex sized></span>
      <span>I am not flex</span>
    </span>
    <br><br>
    <span vertical layout>
      <span>I am not flex</span>
      <span flex>
        intrinsix
      </span>
      <span flex sized></span>
      <span>I am not flex</span>
    </span>
  </div>
  <br><hr><br>
  <div id="test5">
    <h2>layout flex auto</h2>
    <span horizontal layout>
      <span>I am not flex</span>
      <span flex auto>
        intrinsix
      </span>
      <span flex auto sized></span>
      <span>I am not flex</span>
    </span>
    <br><br>
    <span vertical layout>
      <span>I am not flex</span>
      <span flex auto>
        intrinsix
      </span>
      <span flex auto sized></span>
      <span>I am not flex</span>
    </span>
  </div>
  <br><hr><br>
  <div id="test6">
    <h2>layout flex auto-vertical</h2>
    <span horizontal layout>
      <span>I am not flex</span>
      <span flex auto-vertical>
        intrinsix
      </span>
      <span flex auto-vertical sized></span>
      <span>I am not flex</span>
    </span>
    <br><br>
    <span vertical layout>
      <span>I am not flex</span>
      <span flex auto-vertical>
        intrinsix
      </span>
      <span flex auto-vertical sized></span>
      <span>I am not flex</span>
    </span>
  </div>
</div>


<script>
  addEventListener('polymer-ready', function() {
    // no-size container tests
    // test 1: flex layout attributes
    function getTestElements(test) {
      var t = document.getElementById(test);
      return {
        h1: getComputedStyle(t.querySelector('[horizontal] > [flex]')),
        h2: getComputedStyle(t.querySelector('[horizontal] > [flex][sized]')),
        v1: getComputedStyle(t.querySelector('[vertical] > [flex]')), 
        v2: getComputedStyle(t.querySelector('[vertical] > [flex][sized]'))
      };
    }
    //
    (function() {
      var e$ = getTestElements('test1');
      chai.assert.equal(e$.h1.width, e$.h2.width, 'unsized container: horizontal flex items have same width');
      chai.assert.equal(e$.v1.height, '0px', 'unsized container: vertical flex items have no intrinsic height');
    })();
    //
    // test 2: flex auto layout attributes
    (function() {
      var e$ = getTestElements('test2');
      chai.assert.notEqual(e$.h1.width, e$.h2.width, 'unsized container: horizontal flex auto items have intrinsic width + flex amount');
      chai.assert.notEqual(e$.v1.height, '0px', 'unsized container: vertical flex auto items have intrinsic height');
    })();
    //
    // test 3: flex auto-vertical layout attributes
    (function() {
      var e$ = getTestElements('test3');
      chai.assert.equal(e$.h1.width, e$.h2.width, 'unsized container: horizontal flex auto-vertical items have same width');
      chai.assert.notEqual(e$.v1.height, '0px', 'unsized container: vertical flex auto-vertical items have intrinsic height');
    })();
    //
    // Sized container tests
    // test 4: flex layout attributes
    (function() {
      var e$ = getTestElements('test4');
      chai.assert.equal(e$.h1.width, e$.h2.width, 'sized container: horizontal flex items have same width');
      chai.assert.equal(e$.v1.height, e$.v2.height, 'sized container: vertical flex items have same height');
    })();
    //
    // test 5: flex auto layout attributes
    (function() {
      var e$ = getTestElements('test5');
      chai.assert.notEqual(e$.h1.width, e$.h2.width, 'sized container: horizontal flex auto items have intrinsic width + flex amount');
      chai.assert.notEqual(e$.v1.height, '0px', 'sized container: vertical flex auto items have intrinsic height');
      chai.assert.notEqual(e$.v1.height, e$.v2.height, 'sized container: vertical flex auto items have intrinsic width + flex amount');
    })();
    //
    // test 6: flex auto-vertical layout attributes
    (function() {
      var e$ = getTestElements('test3');
      chai.assert.equal(e$.h1.width, e$.h2.width, 'unsized container: horizontal flex auto-vertical items have same width');
      chai.assert.notEqual(e$.v1.height, '0px', 'sized container: vertical flex auto-vertical items have intrinsic height');
      chai.assert.notEqual(e$.v1.height, e$.v2.height, 'sized container: vertical flex auto-vertical items have intrinsic width + flex amount');
    })();
    done();
  });
</script>
  
</body>
</html>